<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="180px"
    >


      <el-form-item label="合同编号" prop="contractId">
        <el-input
          v-model="queryParams.contractId"
          placeholder="请输入合同编号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="领取人" prop="workerId">
        <el-input
          v-model="queryParams.workerId"
          placeholder=""
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="领取时间" prop="backTime">
        <!-- 时间段选择:得到的是数组 -->
        <el-date-picker
          v-model="queryParams.backTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>


      <el-form-item label="领取人机构" prop="amount">
        <el-input
          v-model="queryParams.amount"
          placeholder="请输入领取人机构"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="backTime名称" prop="backTime">
              <el-date-picker
                style="width: 240px"
                v-model="queryParams.backTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
              &lt;!&ndash; 时间段选择:得到的是数组 &ndash;&gt;
              &lt;!&ndash;<el-date-picker
                v-model="queryParams.backTime"
                style="width: 240px"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>&ndash;&gt;
            </el-form-item>-->

      <el-form-item label="销售订单编号" prop="saleOrderId">
        <el-input
          v-model="queryParams.saleOrderId"
          placeholder="请输入销售订单编号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <!--      <el-form-item label="ciden名称" prop="ciden">
              <el-select
                v-model="queryParams.ciden"
                placeholder="ciden名称"
                clearable
                style="width: 240px"
              >
                &lt;!&ndash; 少量选项直接写 &ndash;&gt;
                <el-option :value="0" label="隐藏"></el-option>
                <el-option :value="1" label="显示"></el-option>
              </el-select>
            </el-form-item>-->

      <el-form-item label="分发人" prop="dispatchWorkerId">
        <el-input
          v-model="queryParams.dispatchWorkerId"
          placeholder="请输入分发人"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="回收人" prop="backWorkerId">
        <el-input
          v-model="queryParams.backWorkerId"
          placeholder="请输入回收人"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="getTime名称" prop="getTime">
              <el-date-picker
                style="width: 240px"
                v-model="queryParams.getTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>-->


      <el-form-item label="回收时间" prop="backTime">
        <!-- 时间段选择:得到的是数组 -->
        <el-date-picker
          v-model="queryParams.backTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <!--      <el-form-item label="ycState名称" prop="ycState">
              <el-select
                v-model="queryParams.ycState"
                placeholder="ycState名称"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="item in options.ycState"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>-->
      <el-form-item label="合同状态" prop="ycState">
        <el-select
          v-model="queryParams.ycState"
          placeholder="合同状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in options.ycState"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!--    <el-row :gutter="10" class="mb8">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增
          </el-button>
        </el-row>-->

    <el-table v-loading="loading" :data="tableData">
      <el-table-column width="150" label="合同编号" align="center" prop="contractId">
        <template slot-scope="scope">
          <span style="color: #00afff"
            class="goDetail"
            @click="handleDetail(scope.row)"
          >
                  {{ scope.row.contractId }}
                </span>
        </template>
      </el-table-column>
      <el-table-column width="150" label="领取人" align="center" prop="workerName"/>
      <el-table-column width="200" label="领取时间" align="center" prop="getTime"/>
      <el-table-column width="200" label="出发时间" align="center" prop="saleOrderDto.leaveDt"/>
      <el-table-column width="200" label="线路名称" align="center" prop="saleOrderDto.productName"/>
      <el-table-column width="200" label="销售订单编号" align="center" prop="saleOrderId"/>
      <el-table-column width="200" label="产品编号" align="center" prop="saleOrderDto.productId"/>
      <el-table-column label="回收人" align="center" prop="backWorkerName"/>
      <el-table-column label="回收时间" align="center" prop="backTime"/>
      <el-table-column label="合同状态" align="center" prop="activeIndText"/>
      <el-table-column label="电子合同状态" align="center" prop="activeIndText">
        <template slot-scope="scope">
          {{ scope.row.contractYcDto != null ? scope.row.contractYcDto.stateText : '' }}
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" width="200" label="电子合同地址" align="center" prop="viewUrl">
        <template slot-scope="scope">
          <span style="color: #00afff" @click="handleClick(scope.row)">
            {{ scope.row.contractYcDto != null ? scope.row.contractYcDto.viewUrl : '' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="打印次数" align="center" prop="printNum"/>

      <!--      <el-table-column label="checkIndex名称" align="center" prop="checkIndex"/>
            <el-table-column label="ciden名称" align="center" prop="ciden">
              <template slot-scope="scope">
                {{ scope.row.ciden == 0 ? '隐藏' : '显示' }}
              </template>
            </el-table-column>-->

      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="360">
        <template slot-scope="scope">
<!--          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="generateHtml(scope.row)"
          >打印
          </el-button>-->
<!--          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="handleDetail(scope.row)"
          >详情
          </el-button>-->
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.activeInd==3"
            icon="el-icon-document"
            @click="handleDetail(scope.row)"
          >回收
          </el-button>
          <!--          <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleUpdate(scope.row)"
                    >修改
                    </el-button>-->
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.ycState==0||scope.row.ycState==null"
            icon="el-icon-edit"
            @click="comitApprovalHand(scope.row)"
          >生成电子合同
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.ycState==1&&(userInfo.privilegeList.includes('CONTRACT_APPROVAL'))"
            icon="el-icon-edit"
            @click="approvalState(scope.row)"
          >审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="travelperson(scope.row)"
          >名单
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.activeInd!=3"
            icon="el-icon-document"
            @click="handleCancel(scope.row)"
          >作废
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.activeInd==3"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handlePlanDetail(scope.row)"
          >行程详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="printAqtss(scope.row)"
          >打印安全提示书
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="printDqwts(scope.row)"
          >打印代签委托书
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <Create ref="createDialog" @confirm="getList"/>
    <Detail ref="detailDialog"/>
    <Approval ref="approvalDialog" @confirm="getList"/>
    <Travelperson ref="travelpersonDialog"/>
    <PlanDetail ref="planDetail"/>
  </div>
</template>

<script>
import {
  pageList,
  deleteById,
  cancelContract,
  comitApproval,
} from "@/api/salepurchase/contract"
import Create from "@/views/salepurchase/contract/create";
import Detail from "@/views/salepurchase/contract/detail";
import Approval from "@/views/salepurchase/contract/approval";
import Travelperson from "@/views/travelperson/index";
import PlanDetail from "./planDetail/index.vue"

export default {
  name: "contract",
  components: {Create, Detail, Approval, Travelperson, PlanDetail},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      htmlData:{
        htmlStr:'',
        saleOrderId:''
      },
      updateFilesVo:{
        fileList:[],
        saleOrderId:''
      },
      userInfo:{},
      // 表格数据
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activeInd: "",
        amount: "",
        backTime: "",
        backWorkerId: "",
        checkIndex: "",
        ciden: "",
        contractContent: "",
        contractId: "",
        contractType: "",
        dispatchWorkerId: "",
        getTime: "",
        isNew: "",
        printNum: "",
        printTime: "",
        qrCodeUrl: "",
        saleOrderId: "",
        signingUrl: "",
        workerId: "",
        ycContract: "",
        ycState: ""
      },
      options: {
        // 从接口获取选项
        ycState: [
          {value: 0, label: '未提交'},
          {value: 1, label: '待审核'},
          {value: 2, label: '已审核'},
          {value: -1, label: '不通过'},
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getUserInfo()
  },
  methods: {
    /** 查询合同列表 */
    getList() {
      this.loading = true
      pageList(this.queryParams).then(response => {
          this.tableData = response.rows
          this.total = response.total
          this.loading = false
        }
      )
    },
    getUserInfo(){
      this.userInfo=this.$store.state.user.userInfo;
      console.log(this.userInfo)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleClick(row) {
      window.open(row.contractYcDto != null ? row.contractYcDto.viewUrl : '', '_blank');
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.createDialog.open()
    },
    /** 查看详情操作 */
    handleDetail(row) {
      this.$refs.detailDialog.open(row.id)
    },
    //人员名单
    travelperson(row) {
      this.$refs.travelpersonDialog.open(row.saleOrderId, row.ycContract)
    },
    approvalState(row) {
      this.$refs.approvalDialog.open(row.id)
    },
    comitApprovalHand(row) {
      this.$modal.confirm('确认生成电子合同').then(function () {
        return comitApproval(row.id);
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("生成成功")
      }).catch(() => {

      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.createDialog.open(row.id)
    },
    /**
     * 作废
     */
    handleCancel(row) {

      this.$modal.confirm('是否确认作废' + row.contractId + '？').then(function () {
        return cancelContract(row.id);
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除合同id为' + row.id + '的数据项？').then(function () {
        return deleteById(row.id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {
      })
    },
    /** 行程详情弹窗 */
    handlePlanDetail(row){
      console.log(row.saleOrderDto.productId)
      this.$refs.planDetail.open(row.saleOrderDto.productId)
    },

    printAqtss(row){
      //this.$router.push("/aqtss");
      const routeData = this.$router.resolve({
        path: '/aqtss',
        query: { id: row.id }
      });
      window.open(routeData.href, '_blank');
    },
    printDqwts(row){
      const routeData = this.$router.resolve({
        path: '/dqwts',
        query: { id: row.id }
      });
      window.open(routeData.href, '_blank');
    },

  }
}
</script>
